import React from 'react';
import ORMTyper from '../../server/orm/types';

let orm=new ORMTyper();

let types=orm.ormtype
	,fields=[{name:'无',value:''}];

types.unshift({name:'请选择',value:''});

class DataBase extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    render(){
        let that=this;
        return (
            <div className="opts-box">
                <span className="opts-label">字段注释</span>
                <div className="opts-item">
                    <textarea id="filed-comment" className="cmd-comments" data-id="comment" onChange={this.handleChange} value={this.props.state.comment}></textarea>
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">单元格类型</span>
                <div className="opts-item">
                    <select className="form-control" data-id="type" value={this.props.state.type} onChange={this.handleChange}>
                        {
                            types.map(e=>{
                                let key=e.type+e.name;
                                return <option key={key} value={e.type}>{e.name} ({e.type})</option>
                            })
                        }
                    </select>
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">绑定表字段</span>
                <div className="opts-item">
                    <select className="form-control" data-id="field" value={this.props.state.field} onChange={this.handleChange}>
                        {
                            this.props.fields.map(e=>{
                                return <option key={e.value+e.name} data-type={e.type} value={e.name}>{e.note}</option>
                            })
                        }
                    </select>
                </div>
                <span className="opts-label">隐含值(特殊处理使用)</span>
                <div className="opts-item">
                    <input id="filed-value" className="form-control" data-id="value" onChange={this.handleChange} value={this.props.state.value}/>
                </div>
                <div className="opts-splitline"></div>
                <div className="opts-item">
                    <span data-cmd="clean-dataopts" className="cmd-dataopts-item setting-btn" onClick={this.handleClick}>
                        <i className="fa fa-eraser"></i> 清除设置
                    </span>
                </div>
            </div>
        );
    }
    handleClick(e){
        if(typeof this.props.callback==='function'){
            this.props.callback('dbopts',{
                type:'',
				field:'',
                comment:'',
                value:''
            });
        }
    }
    handleChange(e){
        let key=e.target.getAttribute('data-id');
        let state={};
        state[key]=e.target.value;
        this.props.callback('dbopts',state);
    }
}

export default DataBase;

